<template>
	<view class="container">
		<view class="info-item">
			<text class="label">头像</text>
			<view class="right" >
				<!-- @click="updateAvatar" -->
				<button type="balanced" class="button text-center" open-type="chooseAvatar"
					@chooseavatar="onChooseavatar">
					<image class="avatar" :src="$img_base_url(userInfo ? userInfo.avatar : '')" mode="aspectFill">
					</image>
				</button>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">用户名</text>
			<view class="right" @click="toUrl('/pagesMine/mine/Changenickname/Changenickname?name='+userInfo.nickname)">
				<text>{{userInfo.nickname}}</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">性别</text>
			<view class="right" @click="toUrl('sex')">
				<text>{{userInfo.gender==0 ? '未知' : userInfo.gender==1 ? '男' : '女'}}</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">出生日期</text>
			<view class="right" @click="toUrl('time')">
				<text>{{userInfo.birthday || '无'}}</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">微信号</text>
			<view class="right">
				<text>已绑定/未绑定</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">手机号</text>
			<view class="right" @click="toUrl('/pagesMine/mine/BindPhone/BindPhone')">
				<text>{{userInfo.mobile}}</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>

		<popupPicker ref="popup_time" type="bottom" mode="date" @change="timeChange"></popupPicker>
		<popupPicker ref="popup_sex" type="bottom" mode="sex" :range="sexList" @change="sexChange"></popupPicker>
	</view>
</template>

<script>
	import {
		upload
	} from '@/utils/api/public.js'
	import {
		getUserInfo,
		profileUserInfo
	} from '@/utils/api/userApi.js'
	import popupPicker from '@/components/popup-picker/popup-picker.vue';
	export default {
		components: {
			popupPicker
		},
		data() {
			return {
				val: '',
				sexList: [{
						value: 1,
						text: '男'
					},
					{
						value: 2,
						text: '女'
					}
				],
				userInfo: null
			};
		},
		onLoad() {

		},
		onShow() {
			this.getInfo()
		},
		methods: {
			async onChooseavatar(e) {
				console.log(e);
				let self = this;
				let {
					avatarUrl
				} = e.detail;
				upload({
					file:avatarUrl
				}).then(data => {
					console.log(data, '--')
					this.editInfo({
						avatar: data.data.url
					})
				})
				// const {
				// 	code,
				// 	data
				// } = await this.$Api.uploadFilePromise(avatarUrl)
				// if (code) {
				// 	this.avatarUrl = data.fullurl
				// }
				// this.avatarUrl = avatarUrl
			},
			getInfo() {
				getUserInfo().then(res => {
					// console.log(res,'=-=-')
					this.userInfo = res.data.userinfo
				})
			},
			// updateAvatar() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success: (res) => {
			// 			// console.log(res,'--')
			// 			let file = res.tempFilePaths[0]
						
			// 		},
			// 		fail: () => {}
			// 	})
			// },
			editInfo(obj) {
				uni.showLoading()
				profileUserInfo({
					...obj
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					this.getInfo()
				})
			},

			sexChange(val) {
				uni.showLoading()
				console.log(val)
				this.userInfo.gender = val[0] + 1
				this.editInfo({
					gender: String(val[0] + 1)
				})
				this.$refs.popup_sex.close()
			},
			timeChange(val) {
				uni.showLoading()
				this.userInfo.birthday = val
				this.editInfo({
					birthday: val
				})
				this.$refs.popup_sex.close()
			},

			toUrl(data) {
				switch (data) {
					case 'time':
						this.$refs.popup_time.open()
						break;
					case 'sex':
						this.$refs.popup_sex.pickerValue = [this.userinfo && this.userinfo.gender > 0 ? this.userinfo
							.gender - 1 : 0
						]
						this.$refs.popup_sex.open()
						break;
					default:
						uni.navigateTo({
							url: data
						})
						break;
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}

	/deep/ .bgF {
		border-radius: 40rpx 40rpx 0 0 !important;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 0rpx 22rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		box-sizing: border-box;

		.button {
			background: rgba(0, 0, 0, 0); //设置背景色
		}

		button::after {
			border: none; //去除边框
		}

		.info-item {
			width: 100%;
			padding: 32rpx 22rpx 32rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&:not(:first-child) {
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
			}

			.label {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
				width: 160rpx;
			}

			.right {
				display: flex;
				align-items: center;
				max-width: calc(100% - 180rpx);

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				&>text {
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
				}

				.r_icon {
					width: 18rpx;
					height: 34rpx;
					margin-left: 24rpx;
				}
			}
		}
	}
</style>